<template>
  <div class="share" ref="share">
    <img :src="backgroundArr[randomInt].img" ref="background" />
    <div class="s-text">
      <p class="s-t-name">{{ props.stats?.user }}</p>
      <p class="s-t-title">"{{ backgroundArr[randomInt].title }}"</p>
      <p class="s-t-content">"{{ backgroundArr[randomInt].content }}"</p>
    </div>
    <div class="s-tip-name">iChangan 2022年度个人主旋律</div>
  </div>
  <div class="s-button-bar">
    <div class="s-bb-generate" @click="handleClickDownload">点击生成海报</div>
    <!-- <div class="s-bb-share" @click="handleClickShare">分享好友</div> -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { generateRandomInt } from "@/utils/number";
import { changeStatusBarColor } from "@/cordova/common";
import html2canvas from "html2canvas";
import { ShareTypes } from "@/enums/report";
import { postSaveKeyWord } from "@/api/report";
import { Toast } from "vant";
import { MIDEA_COMMON } from "@/config/constants";
import { removeAdudioAutopaly } from "@/utils/report/music";

const props = defineProps<{
  keyword: string;
  stats: any;
}>();

const share = ref(null);
const background = ref(null);

const randomInt = ref(generateRandomInt(7));

onMounted(() => {
  changeStatusBarColor(backgroundArr.value[randomInt.value].topColor);
});

watch(
  () => props.keyword,
  (n) => {
    console.log("----new keyword----", n);
    if (n) {
      randomInt.value = ShareTypes[props.keyword];
      return;
    }
    postSaveKeyWord(ShareTypes[randomInt.value]);
  },
  {
    immediate: true,
  }
);

const backgroundArr = ref([
  {
    key: ShareTypes.Ocean,
    title: "海阔天空",
    content: "放荡不羁，你我同心",
    img: require("@/assets/img/share/ocean.png"),
    topColor: [49, 162, 215, 1],
  },
  {
    key: ShareTypes.Life,
    title: "怒放的生命",
    content: "生命如花 绚丽多彩，生命如水 波澜壮阔",
    img: require("@/assets/img/share/life.png"),
    topColor: [11, 173, 228, 1],
  },
  {
    key: ShareTypes.Flower,
    title: "生如夏花",
    content: "生如夏花之灿烂，梦想如初齐开放",
    img: require("@/assets/img/share/flower.png"),
    topColor: [21, 176, 215, 1],
  },
  {
    key: ShareTypes.Future,
    title: "我的未来不是梦",
    content: "搭起理想的五彩桥，向人生巅峰攀爬",
    img: require("@/assets/img/share/future.png"),
    topColor: [254, 167, 67, 1],
  },
  {
    key: ShareTypes.Year,
    title: "光辉岁月",
    content: "燃烧，是你对梦想的执着",
    img: require("@/assets/img/share/year.png"),
    topColor: [248, 196, 139, 1],
  },
  {
    key: ShareTypes.Dream,
    title: "抢不走的梦想",
    content: "生活因你而灿烂，梦因你而美丽",
    img: require("@/assets/img/share/dream.jpg"),
    topColor: [57, 143, 251, 1],
  },
  {
    key: ShareTypes.Song,
    title: "我们的歌",
    content: "星火点点的音符，点亮生命每一刻",
    img: require("@/assets/img/share/song.png"),
    topColor: [240, 101, 66, 1],
  },
]);

// const handleClickShare = async () => {
//   console.log(
//     "share.value",
//     share.value,
//     share.value.clientHeight,
//     share.value.clientWidth,
//     share.value.scrollHeight,
//     share.value.scrollWidth
//   );
//   const canvas = await html2canvas(share.value, {
//     useCORS: true,
//     height: share.value.clientHeight,
//     width: share.value.clientWidth,
//   });

//   const imageUrl = canvas.toDataURL("image/jpeg", 0.5);

//   const res = showClientShare({
//     title: "2022年度报告",
//     action: "openH5",
//     widgetId: "com.ichangan.2022yearreport",
//     imageUrl,
//     shareRange: 2,
//   });

//   console.log("----share res----", res);
// };

const handleClickDownload = async () => {
  removeAdudioAutopaly();
  const canvas = await html2canvas(share.value, {
    useCORS: true,
    height: share.value.clientHeight,
    width: share.value.clientWidth,
  });

  const imageUrl = canvas.toDataURL("image/jpeg", 0.5);

  // Toast("to canvas");

  if (typeof cordova !== "undefined") {
    // eslint-disable-next-line
    cordova.exec(
      (data: any) => {
        console.log("success", data);
        Toast("保存成功");
      },
      (err: any) => {
        const error = err || "cordova执行" + "saveToGallery" + "出错";
        console.log("error", error);
      },
      MIDEA_COMMON,
      "saveToGallery",
      [imageUrl]
    );
  } else {
    Toast("请在iChangan运行");
  }

  // downloadImgbyBase64(imageUrl, "test.png");
};
</script>

<script lang="ts">
declare let cordova: any;

export default {
  name: "SharePage",
};
</script>

<style lang="scss" scoped>
.share {
  @include full-screen-relative;
  height: 100vh;
  overflow: hidden;

  img {
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    z-index: 100;
    height: calc(100vh + 20px);
    width: calc(100vw + 20px);
  }

  .s-text {
    position: absolute;
    top: 164px;
    left: 0;
    z-index: 101;
    width: 100vw;
    text-align: center;
    color: #ffffff;
    font-size: 30px;

    .s-t-name {
      width: 240px;
      height: 112px;
      margin: 0 auto;
      margin-bottom: 50px;
      line-height: 112px;
      font-weight: bold;
      background-image: url("~@/assets/img/share/border.png");
      background-repeat: no-repeat;
      background-size: contain;
      font-size: $font-size-key;
    }

    .s-t-title {
      margin-bottom: 40px;
      font-size: 60px;
      font-weight: bold;
    }

    .s-t-content {
      margin-bottom: 30px;
      font-size: 36px;
    }
  }
}

.s-button-bar {
  position: fixed;
  bottom: calc(120px + env(safe-area-inset-bottom));
  z-index: 101;
  display: flex;
  justify-content: space-around;
  width: 100vw;
  height: 104px;

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 104px;
    width: 319px;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 30px;
    font-family: ChangAnunitype;
    font-weight: bold;
    color: #fef2f2;
  }

  .s-bb-generate {
    background-image: url("~@/assets/img/share/bt-generate.png");
  }

  .s-bb-share {
    background-image: url("~@/assets/img/share/bt-share.png");
  }
}

.s-tip-name {
  position: absolute;
  bottom: 52px;
  left: 170px;
  z-index: 102;
  color: #ffffff;
}</style>
